import React from 'react';
import {connect} from 'dva/index';
import {Button, Form, Modal, Table, Tabs} from 'antd';

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const R = require("ramda");
const quotationLocalFeeDetail = Form.create()(class QuotationLocalFeeDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            source: null,
            data: {}
        }
    }

    handleOpen = (record, source) => {
        this.setState({ open: true, data: record, source: source });
    }

    handleCancel = () => {
        this.setState({ open: false });
        this.props.form.resetFields();
    }

    QuoLocalColumns = [
        {
            title: '起运港/目的港', key: 'port',
            render: record => {
                return <div>
                    <span>
                        <div>{record.loadingEnName}</div><div>({record.loadingName})</div>
                    </span>—>
                    <span>
                        <div>{record.destinationEnName}</div><div>({record.destinationName})</div>
                    </span>    
                </div>
            }
        },
        { title: '航线名称', dataIndex: 'airlineName', key: 'airlineName' },
        { title: '船公司代码', dataIndex: 'berthingCode', key: 'berthingCode' },
        { title: '船期', dataIndex: 'cut_off', key: 'cut_off' },
        { title: '航程(天数)', dataIndex: 'sail', key: 'sail' },
        { title: '中转港', key: 'transit',
            render: record =>{
                return <span>{record.transitEnName}({record.transitName})</span> 
            }
        },
        { title: '20GP', dataIndex: 'fee20gp', key: 'fee20gp' },
        { title: '40GP', dataIndex: 'fee40gp', key: 'fee40gp' },
        { title: '40HQ', dataIndex: 'fee40hq', key: 'fee40hq' },
        //{ title: '运价备注', dataIndex: 'memo', key: 'memo' },
        {
            title: '有效期', key: 'date',
            render: record => {
                return <span>{record.begindate} 至 {record.enddate} </span>
            }
        }
    ];

    QuoLocalFeeColumns = [
        {
            title: '费用名称', key: 'name',
            render: record => {
                return <span>{record.name}({record.code})</span>
            }
        },
        {
            title: '单位', key: 'unit',
            render(record) {
                if (record.unit === '1') {
                    return '箱';
                } else if (record.unit === '2') {
                    return '票';
                } else {
                    return '未知';
                }
            }
        },
        { title: '20GP', dataIndex: 'fee20gp', key: 'fee20gp' },
        { title: '40GP', dataIndex: 'fee40gp', key: 'fee40gp' },
        { title: '40HQ', dataIndex: 'fee40hq', key: 'fee40hq' },
        { title: '单票价格', dataIndex: 'feeSingle', key: 'feeSingle' },
        { title: '币种', dataIndex: 'currency', key: 'currency' },
        { title: '备注', dataIndex: 'b', key: 'b' }
    ];

    declareFeeColumns = [
        { title: '费用名称', dataIndex: 'name', key: 'name' },
        { title: '币种', dataIndex: 'currency', key: 'currency' },
        { title: '价格', dataIndex: 'amt', key: 'amt' }
    ];

    trailerFeeColumns = [
        { title: '费用名称', key: 'name',
            render: record => {
                return <span>拖车费</span>
            }
        },
        { title: '币种', key: 'currency',
            render: record => {
                return <span>CNY</span>
            }
        },
        { title: '20GP', dataIndex: 'fee20gp', key: 'fee20gp' },
        { title: '40GP', dataIndex: 'fee40gp', key: 'fee40gp' },
        { title: '40HQ', dataIndex: 'fee40hq', key: 'fee40hq' }
    ];


    render() {
        const { getFieldDecorator } = this.props.form;
        let formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 17 } };
        let temp = this.props.quotationFee.declareFeeList ? this.props.quotationFee.declareFeeList : [];
        let declareFeeList = [];
        if (temp.length > 0) {
            declareFeeList.push({ name: '报关费', currency: 'CNY', amt: temp[0].declareFee });
            declareFeeList.push({ name: '港建费', currency: 'CNY', amt: temp[0].portConstructionFee });
        }

        let title = <div><span>本地费用（附加费）</span>
                        <span style={{ color: 'red' }}>&nbsp;&nbsp;&nbsp;&nbsp;当前结算汇率:{R.isNil(this.props.quotationFee.dataSource.usdRate) ? null : this.props.quotationFee.dataSource.usdRate}</span>
                    </div>
        let footer = [
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this)}>{"退出"}</Button>
        ];
        return (
            <div>
                {this.state.open ?
                    <Modal maskClosable={false} visible={this.state.open} width={1200} title={title} confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>
                        <Tabs tabPosition={'top'}>
                            <TabPane tab="海运费" key="1">
                                <Table loading={this.props.loading}
                                    dataSource={R.isNil(this.state.data) ? {} : [this.state.data]}
                                    columns={this.QuoLocalColumns}
                                    bordered={true} size={'middle'}
                                    pagination={false} />
                            </TabPane>
                        </Tabs>

                        <Tabs tabPosition={'top'} style={{ marginTop: 20 }}>
                            <TabPane tab="海运附加费明细" key="1">
                                <Table loading={this.props.loading} 
                                    dataSource={R.isNil(this.props.quotationFee.localFeeList) ? [] : this.props.quotationFee.localFeeList}
                                    columns={this.QuoLocalFeeColumns}
                                    bordered={true} size={'middle'}
                                    pagination={false} />
                            </TabPane>
                        </Tabs>

                        {this.props.lastSearchConditon && this.props.lastSearchConditon.declare == "1" && this.state.source == "1" ?
                            <Tabs tabPosition={'top'} style={{ marginTop: 20 }}>
                                <TabPane tab="报关费明细" key="1">
                                    <Table loading={this.props.loading} dataSource={declareFeeList}
                                        columns={this.declareFeeColumns}
                                        bordered={true} size={'middle'}
                                        pagination={false} />
                                    <div>备注：报关过程中产生的杂费，请根据相关票据金额实报实销</div>
                                </TabPane>
                            </Tabs>
                            :
                            ""
                        }

                        {this.props.lastSearchConditon && this.props.lastSearchConditon.trailer == "1" && this.state.source == "1" ?
                            <Tabs tabPosition={'top'} style={{ marginTop: 20 }}>
                                <TabPane tab="拖车费明细" key="1">
                                    <Table loading={this.props.loading}
                                        dataSource={R.isNil(this.props.quotationFee.trailerFeeList) ? [] : this.props.quotationFee.trailerFeeList}
                                        columns={this.trailerFeeColumns}
                                        bordered={true} size={'middle'}
                                        pagination={false} locale={{ emptyText: '没有对应的拖车报价，可向运营人员申请补充' }}/>
                                    <div>备注：拖车过程中产生的杂费，请根据相关票据金额实报实销</div>
                                </TabPane>
                            </Tabs>
                            :
                            ""
                        }
                    </Modal>
                    : ""}
            </div>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.quotationFee, quotationFee: state.quotationFee
    };
}

export default connect(mapStateToProps)(quotationLocalFeeDetail);